<template>
  <el-form-item label="备注" prop="remark" class="desc-form-item">
    <el-input
      v-model="_remark"
      type="textarea"
      resize="none"
      :maxlength="size"
      :autosize="{ minRows: 3 }"
    />
    <span class="count">
      <span :class="num > 0 ? 'num' : ''">{{ num }}</span>
      <span>/{{ size }}</span>
    </span>
  </el-form-item>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

const props = defineProps({
  remark: {
    type: String as PropType<any>,
    default: '',
  },
  size: {
    type: Number,
    default: 50,
  },
})

const emits = defineEmits(['update:remark'])

const _remark: any = computed({
  get() {
    return props.remark
  },
  set(val) {
    emits('update:remark', val)
  },
})
const num = computed(() => {
  return _remark.value ? _remark.value.length : 0
})
</script>
